<template>
  <div>
    <div class="border">
      <div class="add">
        <el-button v-preventReClick plain size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
      </div>
    </div>
    <el-dialog title="待调动组织" :visible.sync="open" width="500px" append-to-body>
        <el-row class="margin-top-sm padding-left padding-right height500">
          <el-col :span="10">
            <div class="border-bottom flex justify-between align-start" style="height:30px">请选择待调动组织</div>
              <div class="margin-top">
                <el-input v-model="queryParams.orgName" placeholder="请输入组织名称">
                  <i
                      class="el-icon-search el-input__icon"
                      slot="suffix"
                      @click="search">
                  </i>
              </el-input>
            </div>
            <div class="margin-top-xs">
                <el-tree show-checkbox  default-expand-all :data="list" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="border-bottom flex justify-between align-start margin-left" style="height:30px">
              <div>已选待调动组织</div>
              <div><el-button v-preventReClick type="text">清空</el-button></div>
            </div>

            <div class="border-left height500 margin-left">

            </div>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick type="primary">确 定</el-button>
          <el-button v-preventReClick @click="open = false">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { listSimpleDepts } from "../../../api/system/dept";
export default {
  props: {
    list:{
        type:Array,
        default:[]
    }
  },
  data() {
    return {
      open: false,
      treelist:[],
      queryParams:{},
        defaultProps: {
          children: 'children',
          label: 'label'
        }

    };
  },
  created() {
    console.log('Jinlai----')
    this.getTreeselect();
  },
  methods: {
    handleAdd(){
      this.open = true
    },
    getTreeselect() {
      listSimpleDepts().then(response => {
        // 处理 list 参数
        this.treelist = [];
        this.treelist.push(...this.handleTree(response.data, "id"));
        console.log(this.treelist,response.data,'response.data---');
        // if(this.list.length  == 0)return
        // this.$emit("emitParentGlobalThis", this.deptOptions[0].id);
      });
    },
      // tree
    handleNodeClick(data) {
        console.log(data);
    },
    // search
    search(){
      
    }
  },
  created() {}
};
</script>
<style scoped lang="scss">
.height500{
  height: 400px;
}
.border{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #F4F6FA;
}
::v-deep .border-bottom{
    border-bottom: 1px solid #F4F6FA;
    .el-button--small{
      padding: 0px 10px;
    }

}
.border-left{
    border-left: 1px solid #F4F6FA;
}
.border-right{
    border-right: 1px solid #F4F6FA;
}
.add{
  margin: -2px;
  margin-left: 5px;
}
::v-deep .el-button--mini{
  padding: 3px 10px;
  span{
    margin-left: 1px;
  }
}
::v-deep .el-dialog__body{
  padding: 0 0px 20px 0px;
}
</style>